//  this library.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:hktk_app/util/font_util.dart';
import 'package:hktk_app/util/view_util.dart';

import 'countdown_widget.dart';
// import 'package:hktk_app/widget/login/countdown_widget.dart';

/// 定义方法类型
typedef SendCode = Future<bool> Function();

/// 手机号登录输入框
class PhoneInputWidget extends StatefulWidget {
  /// 提示
  final String? tips;

  /// 输入框类型，默认为1，1：输入，2：验证码，3：密码
  final int type;
  final phoneLength = 11;

  /// 右边组件点击方法
  final SendCode? rightOnTapFun;

  /// 输入框控制器
  final TextEditingController controller;

  const PhoneInputWidget({
    super.key,
    this.tips,
    this.type = 1,
    this.rightOnTapFun,
    required this.controller,
  });

  /// 手机号输入框
  const PhoneInputWidget.phone({
    super.key,
    required this.controller,
  })  : tips = "请输入手机号",
        type = 1,
        rightOnTapFun = null;

  /// 验证码输入框
  const PhoneInputWidget.captcha({
    super.key,
    required this.controller,
    required this.rightOnTapFun,
  })  : tips = "请输入验证码",
        type = 2;

  /// 密码输入框
  const PhoneInputWidget.password({
    super.key,
    required this.controller,
    this.tips = "请输入密码",
  })  : type = 3,
        rightOnTapFun = null;

  @override
  State<PhoneInputWidget> createState() => _PhoneInputWidgetState();
}

class _PhoneInputWidgetState extends State<PhoneInputWidget> {
  /// 是否以密码的方式来显示
  late bool obscureText = false;

  /// 是否是在默认状态
  late bool isDefault = true;

  /// 输入框
  get _input => TextField(
    // maxLength: 11,
      controller: widget.controller,
      // 设置光标颜色
      cursorColor: colorBlue1,
      // 光标高度
      cursorHeight: 22,
      // 样式
      style: FontUtil.fontGrey5(16),
      // 是否隐藏文本，以密码方式显示
      obscureText: obscureText,
      // 装饰
      decoration: InputDecoration(
        // 去掉textField自定的高度
        isCollapsed: true,
        // 内容边距
        contentPadding: EdgeInsets.only(bottom: 3),
        // 去除边框
        border: InputBorder.none,
        // 提示语句
        hintText: widget.tips,
        // 提示语句样式
        hintStyle: FontUtil.fontGrey5(16),
      ),
      inputFormatters: <TextInputFormatter>[
        // WhitelistingTextInputFormatter.digitsOnly,//只输入数字
        LengthLimitingTextInputFormatter(widget.type==1?11:20) //限制长度
      ]);

  /// 验证码显示
  get _captcha => GestureDetector(
    onTap: () async {
      bool success = await widget.rightOnTapFun!();
      if (success) {
        // 开始倒计时
        setState(() {
          isDefault = false;
        });
      }
    },
    child: Text(
      "获取验证码",
      style: FontUtil.fontBlack1(16),
    ),
  );

  /// 倒计时显示
  get _countdown => CountdownWidget(
      num: 60,
      endFun: () {
        setState(() {
          isDefault = true;
        });
      });

  @override
  void initState() {
    super.initState();
    if (widget.type == 3) {
      setState(() {
        obscureText = true;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 32),
        decoration: BoxDecoration(
          color: colorWhite1,
          borderRadius: BorderRadius.circular(45),
        ),
        child: Row(
          children: [
            Expanded(
              child: _input,
            ),
            _rightWidget(),
          ],
        ));
  }

  /// 右边显示
  _rightWidget() {
    if (widget.type == 1) {
      return const SizedBox();
    } else if (widget.type == 2) {
      return isDefault ? _captcha : _countdown;
    } else if (widget.type == 3) {
      return isDefault
          ? _passwordShow("images/login/phone_password_not_show.svg")
          : _passwordShow("images/login/phone_password_on_show.svg");
    }
  }

  /// 密码标签显示
  _passwordShow(String svgUrl) {
    return GestureDetector(
      onTap: () {
        setState(() {
          obscureText = !obscureText;
          isDefault = !isDefault;
        });
      },
      child: SvgPicture.asset(
        svgUrl,
        width: 30,
        height: 30,
      ),
    );
  }
}
